<template>
    <div class="teams-container">
        <head-temp :currentIndex=0></head-temp>
        <div class="list-container">
            <Table stripe border :columns="tableColumns" :data="tableData" :loading="tableLoading" :no-data-text="noData"></Table>
            <Page :total="pageTotal" :current="pageIndex" :page-size="pageCount"
                  @on-change="handlePaginationList" class-name="pagination-container"></Page>
        </div>
        <footer-temp></footer-temp>
    </div>
</template>

<script>
import headTemp from '../../components/headTemp';
import footerTemp from '../../components/footerTemp';
import config from '../../../config/config';
import '../../../static/style/base.less';

export default {
    name: 'search',
    components: { headTemp, footerTemp },
    data () {
        return {
            searchValue: '',
            pageIndex: 1,
            pageCount: 20,
            pageTotal: null,
            tableLoading: false,
            tableData: [],
            tableColumns: [
                {
                    title: this.$t('股票代码'),
                    key: 'stock_code',
                    align: 'left',
                    ellipsis: 'true',
                    sortable: true,
                    width: 110,
                    render: (h, params) => {
                        var codeUrl = 'http://quote.eastmoney.com/' + params.row.stock_code + '.html?';
                        return h('a', {
                            style: {
                                display: 'inline-block',
                                margin: '0 5px 0 5px',
                                color: '#498bbe',
                                cursor: 'pointer'
                            },
                            attrs: {
                                href: codeUrl,
                                target: '_blank'
                            }
                        }, params.row.stock_code);
                    }
                },
                {
                    title: this.$t('股票名称'),
                    key: 'stock_name',
                    align: 'left',
                    ellipsis: 'true',
                    width: 110,
                    render: (h, params) => {
                        var nameUrl = 'http://data.eastmoney.com/stockdata/' + params.row.stock_code + '.html';
                        return h('a', {
                            style: {
                                display: 'inline-block',
                                margin: '0 5px 0 5px',
                                color: '#498bbe',
                                cursor: 'pointer'
                            },
                            attrs: {
                                href: nameUrl,
                                target: '_blank'
                            }
                        }, params.row.stock_name);
                    }
                },
                {
                    title: this.$t('报告标题'),
                    key: 'title',
                    align: 'left',
                    ellipsis: 'true',
                    // width: '650px',
                    render: (h, params) => {
                        // var titleUrl = 'http://pdf.dfcfw.com/pdf/H3_' + params.row.info_code + '_1.pdf';
                        let texts = '';
                        if (params.row.title.length > 40) {
                            texts = params.row.title.substring(0, 40) + '.....';
                        } else {
                            texts = params.row.title;
                        }
                        var title = texts + ' (' + params.row.attach_pages + '页)';
                        var titleUrl = 'http://stock.myhozz.com/report/count/report?info_code=' + params.row.info_code;
                        return h('a', {
                            style: {
                                display: 'inline-block',
                                margin: '0 5px 0 5px',
                                color: '#498bbe',
                                cursor: 'pointer'
                            },
                            attrs: {
                                href: titleUrl,
                                target: '_blank'
                            }
                        }, title);
                    }
                },
                {
                    title: this.$t('机构'),
                    key: 'org_short_name',
                    align: 'center',
                    ellipsis: 'true',
                    sortable: true,
                    width: 120,
                    render: (h, params) => {
                        var targetUrl = 'http://data.eastmoney.com/report/orgpublish.jshtml?orgcode=' + params.row.org_code;
                        return h('a', {
                            style: {
                                display: 'inline-block',
                                margin: '0 5px 0 5px',
                                color: '#498bbe',
                                cursor: 'pointer'
                            },
                            attrs: {
                                href: targetUrl,
                                target: '_blank'
                            }
                        }, params.row.org_short_name);
                    }
                },
                {
                    title: this.$t('行业'),
                    key: 'industry_name',
                    align: 'center',
                    ellipsis: 'true',
                    width: 120,
                    sortable: true,
                    render: (h, params) => {
                        var targetUrl = 'http://quote.eastmoney.com/center/boardlist.html#boards-bk0' + params.row.industry_code;
                        return h('a', {
                            style: {
                                display: 'inline-block',
                                margin: '0 5px 0 5px',
                                color: '#498bbe',
                                cursor: 'pointer'
                            },
                            attrs: {
                                href: targetUrl,
                                target: '_blank'
                            }
                        }, params.row.industry_name);
                    }
                },
                {
                    title: this.$t('发布日期'),
                    key: 'publish_date',
                    align: 'center',
                    width: 150,
                    sortable: true,
                    ellipsis: 'true'
                }
            ],
            noData: this.$t('global.noData')
        };
    },
    mounted () {
        this.init();
    },
    beforeRouteUpdate (to, from, next) {
        next();
        this.init();
    },
    methods: {
        init () {
            this.searchValue = this.$route.query.keyword || '';
            this.pageIndex = Number(this.$route.query.pageIndex) || 1;
            this.pageCount = Number(this.$route.query.pageCount) || 20;
            this.getSearchList();
        },
        getSearchList () {
            this.tableLoading = true;
            this.$http.post(`${config.apiDomain}/report/list/getReport`, {
                query: this.searchValue,
                page_id: this.pageIndex,
                size: this.pageCount
            }).then(res => {
                this.tableLoading = false;
                let data = res.data;
                if (data.code === 0) {
                    const list = data.data.list;
                    this.tableData = list || [];
                    this.pageTotal = Number(data.data.total_num);
                    this.$router.push({
                        query: {
                            keyword: this.searchValue,
                            pageIndex: this.pageIndex,
                            pageCount: this.pageCount
                        }
                    });
                } else {
                    this.tableLoading = false;
                    this.tableData = [];
                    this.$Message.error(`${this.$t('global.somethingError')}, ${data.message}`);
                }
            }).catch(() => {
                this.tableLoading = false;
                this.tableData = [];
                this.$Message.error(this.$t('global.somethingError'));
            });
        },
        handlePaginationList (pageIndex) {
            this.pageIndex = pageIndex;
            this.getSearchList();
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .teams-container {
        .breadcrumbs {
            width: 100%;
            height: 50px;
            background-color: #eee;
            .bread-item {
                max-width: 1200px;
                margin: 0 auto;
                height: 50px;
                line-height: 50px;
                font-size: 18px;
            }
        }
        .list-container {
            max-width: 1200px;
            margin: 20px auto;
            min-height: 521px;
            .pagination-container {
                margin-top: 20px;
                float: right;
                li {
                    .ivu-page-item-active {
                        background-color: #ccc;
                    }
                }
            }
        }
    }
</style>
